<template lang="html">
<div class="redeem-code-page normal-table-page">
	<Card :dis-hover="true">
		<p slot="title">
			<Icon type="pricetag"></Icon> 兑换码管理
		</p>
		<div slot="extra">

			<Input v-model="searchKey" class="search-input" icon="search" placeholder="兑换码、兑换人或手机号" style="width: 300px" @keydown.native.enter="doSearch"></Input>
			<Button type="ghost" class="add-new-btn" v-if="searchKey" @click="clearSearch()">清空</Button>

			<Button type="ghost" class="add-new-btn" icon="plus" @click="showModal = true">新增</Button>
		</div>
		<Table :columns="redeemCodeTableColumns" :loading="pageLoading" ref="redeemCodeTable" border :data="redeemCodeList"></Table>

		<!-- <transition name="fade">
			<div class="loading-cover" v-if="pageLoading">
				<Spin fix size="large"></Spin>
			</div>
		</transition> -->
		<div class="page-ctrl" v-if="pageCount">
			<Page :total="pageCount" :current="pageNum" show-total show-elevator @on-change="changePage" :page-size="20">
			</Page>
		</div>
	</Card>
	<Modal :mask-closable="false" v-model="showModal" :title="selectRedeem ? '编辑':'新增'" :loading="modalLoading" class-name="redeem-modal" @on-ok="clickOK()">
		<Form :model="redeemCodeForm" ref="redeemCodeForm" :rules="redeemCodeFormRules">
			<FormItem label="到期时间" prop="expire_time" >
                <DatePicker v-model="redeemCodeForm.expire_time" type="datetime" format="yyyy-MM-dd HH:mm"  placeholder="选择日期" style="width: 200px" :options="datePickOption" confirm></DatePicker>
			</FormItem>
            <FormItem label="可兑换爱豆数量" prop="love_beans_num">
                <InputNumber v-model="redeemCodeForm.love_beans_num" :min="1"></InputNumber>
            </FormItem>
            <FormItem label="生成兑换码数量" prop="add_count" v-if="!selectRedeem">
                <InputNumber v-model="redeemCodeForm.add_count" :min="1"></InputNumber>
            </FormItem>
		</Form>
	</Modal>
</div>
</template>

<script src="./redeem-code.js">

</script>

<style lang="scss" src='./redeem-code.scss'>
</style>
